<!doctype html>

<html lang="en">
<head>
	<title>飞织产线生产看板</title>
	<meta name="keywords" content="keyword1,keyword2,keyword3">
	<meta name="description" content="飞织产线生产看板">
	<meta name="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<script src="../../script/mes-import.js"></script>
	<script type="text/javascript" src="../../script/js/echart/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/js/My97DatePicker/WdatePicker.js"></script>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<style type="text/css">
		html,body{height:100%;	background: url(../img/fz_background.png) no-repeat;}
		#center{
			width: 100%;
			height: 100%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
		}
		.left{
			width: 60.5%;
			height: 80%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			/*background-color: #e6e6e6;*/
			left:4.5%;
			top:15%;
			/*border: 1px solid #f4992e;*/
		}
		.top{
			width: 100%;
			height: 80%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			background-color: #e6e6e6;
			/*left:4%;*/
			/*top:10%;*/
			border: 1px solid #f4992e;
		}
		.down{
			width: 100%;
			height: 18%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			background-color: #e6e6e6;
			/*left:4%;*/
			top:1%;
			border: 1px solid #f4992e;
		}
		.left-foot{
			width: 100%;
			height: 100%;
			margin: 0px;
			padding: 0px;
		}
		.tr-td{
			width: 10%;
			height: 100%;
			float:left;
			left:100px;
			text-align: center;
		}
		.bubble{
			position: absolute;
			width: 50px;
			height: 50px;
			background-color:rgb(0,200,200);
			/*filter:alpha(opacity:30);*/
			opacity:0.3;
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			z-index: 9999;
			margin: 0 auto
		}
		.bubbleOne{
			position: absolute;
			width: 20px;
			height: 20px;
			background-color:rgb(0,200,200);
			/*filter:alpha(opacity:30);*/
			opacity:0.3;
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			z-index: 9999;
		}
		.right{
			width: 32%;
			height: 80%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			left:4%;
			top:15%;
		}
		.right1{
			width: 95%;
			height: 35%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			background-color: white;
			/*background: url(../img/FZJ1.jpeg);*/
			left:5%;
			border: 1px solid #f4992e;
		}
		#right2{
			width: 95%;
			height: 25%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			background-color: white;
			left:5%;
			top:1%;
			border: 1px solid #f4992e;
		}
		.right3{
			width: 95%;
			height: 35%;
			display: flex;
			position: relative;
			flex-wrap: wrap;
			background-color: white;
			left:5%;
			top:1.7%;
			border: 1px solid #f4992e;
		}
		#addTr{
			border:1px solid #f4992e;
			width: 100%;
		}
		#addTr_exp{
			/*border-bottom:1px solid #f4992e;*/
			border-top:1px solid #656565;
		}
		.addTr_exp_title{
			border-bottom:1px solid #656565;
		}
		.addTr_title{
			border-left:1px solid #f4992e;
			border-bottom:1px solid #f4992e;
			margin: 0px;
			width: 10%;
			height: 30px;
		}
		.addTr_exp_title{
			border-bottom:1px solid #656565;
		}
		.detail_table{
			width: 100%;
			height: 100%;
		}
		#last1{
			border-right:1px solid #f4992e;
		}
		.kuandu{
			width: 0px;
			background: #ff8b41;
			float: left;
			height: 25px;
			line-height: 25px;
		}
		.test{
			width: 150px;
			/*border:1px solid #f4992e;*/
			height: 25px;
		}
		ul
		{
			width: 100%;
			height: 100%;
			list-style-type: none;
			padding: 0px;
			margin: 0px;
		}
		li
		{
			width: 16%;
			height: 50%;
			background-image: url(../img/quan.png);
			text-decoration: none;
			text-decoration: none;  /*去掉前面的圆点*/
			list-style: none;
			float: left;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position:center center;
			margin-left: 5px;
		}

	</style>
</head>
<body id="mainPageReport">
<div style="width: 100%;height: 100%">
	<div id="center">
		<div class="left">
			<div class="top">
				<div class="main" style="width: 100%;">
					<table class="detail_table" id="orderHistory">
						<tr id="addTr">
							<th class="addTr_title">机台</th>
							<th class="addTr_title">待生产工单</th>
							<th class="addTr_title">生产中的工单</th>
							<th class="addTr_title">开工时间</th>
							<th class="addTr_title">预计时长</th>
							<th class="addTr_title" id="jd_css">进度</th>
							<th class="addTr_title">机台完工数</th>
						</tr>
						<!--<tr id="addTr1"></tr>-->
					</table>
					<!--<table class="layui-hide" id="orderHistory" lay-filter="sdblTable" ></table>-->
				</div>
			</div>
			<div class="down">
				<div class="left-foot" style="width: 88%">
					<div style="width: 100%;height: 30%;align-content: center;border-bottom:1px solid #f4992e;">
						<!--<div>-->
							<div class = "tr-td">机台1</div>
							<div class = "tr-td">机台2</div>
							<div class = "tr-td">机台3</div>
							<div class = "tr-td">机台4</div>
							<div class = "tr-td">机台5</div>
							<div class = "tr-td">机台6</div>
							<div class = "tr-td">机台7</div>
							<div class = "tr-td">机台8</div>
							<div class = "tr-td">机台9</div>
							<div class = "tr-td">机台10</div>
						<!--</div>-->
					</div>
					<div  style="width: 100%;height: 69%;text-align:center;">
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: red"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: orangered"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
						<div class = "tr-td"><div class = "bubble" style="top: 55%;background-color: green"></div></div>
					</div>
					<!--<tr style="width: 100%;border:1px solid #453dff">-->
						<!---->
					<!--</tr>-->
				</div>
				<div class="left-foot" style="width: 10%;height: 100%;border-left:1px solid #f4992e;margin: 0px;padding: 0px;" rowspan="2">
					<td style="width: 10%;height: 100%;border-left:1px solid #f4992e;margin: 0px;padding: 0px;" rowspan="2" >
						<div style="height: 25%;width: 100%">
							<div class = "bubbleOne" style="float:left;margin-left: 10px;top: 5%;background-color:green "></div>
							<div style="float: right;margin-right: 10px;text-align:center">正常</div>
						</div>
						<div style="height: 25%;width: 100%">
							<div class = "bubbleOne" style="float:left;margin-left: 10px;top: 28%;background-color:blue "></div>
							<div style="float: right;margin-right: 10px;top: 28%">待机</div>
						</div>
						<div style="height: 25%;width: 100%">
							<div class = "bubbleOne" style="float:left;margin-left: 10px;top: 50%;background-color:red "></div>
							<div style="float: right;margin-right: 10px;top: 50%">报警</div>
						</div>
						<div style="height: 25%;width: 100%">
							<div class = "bubbleOne" style="float:left;margin-left: 10px;top: 74%;background-color:orangered "></div>
							<div style="float: right;margin-right: 10px;top: 74%">停机</div>
						</div>
					</td>
				</div>
			</div>
			<!--<div class="down">-->
				<!--<div class="main">-->
					<!--<table class="layui-hide" id="" lay-filter="sdblTable" ></table>-->
				<!--</div>-->
			<!--</div>-->
		</div>
		<div class="right">
			<div class="right1">
				<div class="main">
					<img src="../img/FZJ1.jpeg" STYLE=" padding:0; border:0; width: 100%;height: 100%;">
				</div>
			</div>
			<div id="right2">
				<div class="main" style="width: 100%;">
					<div style="height: 15%"><p style="color: #f4992e;text-align: center;font-size: 16px;PingFang-SC-Regular:18px;">异常情况汇总</p></div>
					<div style="height: 85%">
						<table id="exceptionList" style="width: 100%">
							<tr id="addTr_exp">
								<th class="addTr_exp_title">机台</th>
								<th class="addTr_exp_title">异常原因</th>
								<th class="addTr_exp_title">上报时间</th>
								<th class="addTr_exp_title">状态</th>
							</tr>
							<tr id="addTr_exp1"></tr>
						</table>
					</div>
					<!--<table class="layui-hide" id="exceptionList" lay-filter="sdblTable" ></table>-->
				</div>
			</div>
			<div class="right3">
				<div class="main" style="width: 100%;">
					<div style="height: 10%"><p style="color: #f4992e;text-align: center;font-size: 16px">飞织机台纱线库存情况</p></div>
					<div></div>
					<div id="fzjkcTable"style="width: 100%;height: 90%"></div>
					<!--<table class="layui-hide" id="kcList" lay-filter="sdblTable" ></table>-->
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
    var host = "";
    try {
        host = top.window.location.protocol + "//" + top.window.location.host + "/";
    } catch (e) {
        host = window.location.protocol + "//" + window.location.host + "/";
    }
    var loca_Url = window.location.href.split("/");
    if (loca_Url[3] != "common") {
        host += loca_Url[3] + "/";
    }
    var vm = new Vue({
        el : "#mainPageReport",
        data : {
            exc_arr:[]
            ,cols_arr : []
            ,kc_arr : []
            ,dsc_arr : []
        }
        ,init:function(){
            var _self = this;
            _self.$options.methods.expTable(_self);
            _self.$options.methods.renderTable(_self);
            _self.$options.methods.kcqtyTable(_self);
            _self.$options.methods.statusTable(_self);
        }

        ,methods: {
            getData:function(_self){
                alert(_self);
                _self.$nextTick(function() {

                });
            },

            expTable:function(_self){
                _self.$nextTick(function() {
                    this.$http.post(host +"fzProductPage/fzProductPage",
                        {},
                        {emulateJSON: true}).then(function(res){
                        if(res.ok){
                            $("#addTr_exp").nextAll().remove();
                            exceptionTable(res.body.fzjdata.exceptionList);
                        }
                    });
                });
            },
            renderTable:function(_self){
                var myDate = new Date();
                _self.$nextTick(function() {
                    this.$http.post(host +"fzProductPage/fzProductPage",
                        // _self.$http.post("../fzProductPage/fzProductPage",
                        {},
                        {emulateJSON: true}).then(function(res){
                        if(res.ok){
                            $("#addTr").nextAll().remove();
                            createTable(res.body.fzjdata.fzjKBList,res.body.fzjdata.dJobCodeList);
                        }
                    });
                });
            },
            kcqtyTable:function(_self){
                _self.$nextTick(function() {
                    this.$http.post(host +"fzProductPage/fzProductPage",
                        {},
                        {emulateJSON: true}).then(function(res){
                        if(res.ok){
                            productKCTable(res.body.fzjdata.productKcQty);
                        }
                    });
                });
            },
            statusTable:function(_self){
                _self.$nextTick(function() {
                    this.$http.post(host +"fzProductPage/fzProductPage",
                        {},
                        {emulateJSON: true}).then(function(res){
                        if(res.ok){
                            fzjStatusTable(res.body.fzjdata.fzjStatusList);
                        }
                    });
                });
            },

        }
        ,watch: {

        }
    });

    //飞织机看板表
    function createTable(detailList,dJobCodeList){
        if(detailList){
            var trHtml = [];
            var result = document.getElementsByClassName('result')[0];
            for(var i in detailList) {
                trHtml.push("<tr>");
                trHtml.push("<td align='center' class='addTr_title'>" + detailList[i].FZJCODE + "</td>");
                trHtml.push("<td align='center' class='addTr_title'><ul id='d_product_"+(i)+"'></ul></td>");
                trHtml.push("<td align='center' class='addTr_title'>" + nvl(detailList[i].JOBCODEING,'') + "</td>");
                trHtml.push("<td align='center' class='addTr_title'>" + nvl(detailList[i].STARTTIMES,'') + "</td>");
                trHtml.push("<td align='center' class='addTr_title'>" + nvl(detailList[i].YTIME,'') + "</td>");
                trHtml.push("<td align='center' class='addTr_title'><div class ='test'><div id='progress_"+(i)+"' class='kuandu'></div></div></td>");
                trHtml.push("<td align='center' class='addTr_title' id='last1'>" + nvl(detailList[i].JOBNUM,'') + "</td>");
                trHtml.push("</tr>");
            }
            trHtml = trHtml.join("");

            $("#addTr").after(trHtml);

            haha(detailList);
            // quanquan(dJobCodeList);
            for(var i in detailList){
                // var li = document.createElement('li');
                // document.getElementById("d_product_" + i).append(li); // 添加到UL中去
                for (var j = 0; j < 2; j++) {
                    $("#d_product_" + i).append("<li></li>");// 添加到UL中去
                }
            }

        }
    }
    //进度条
    function haha(jdList){
        // for(var i in jdList) {
        //     var jindutiao = document.getElementById("progress_" + i);
        //     jindutiao.style.width = jdList[i].JINDU + "%";
        //     jindutiao.innerHTML = jindutiao.style.width;
        // }
        for(var i =0;i<10;i++) {
            var jindutiao = document.getElementById("progress_" + i);
            var num = i*10;
            jindutiao.style.width = num + "%";
            jindutiao.innerHTML = jindutiao.style.width;
        }
    }
	//待生产工单的圆圈
    function quanquan(dJobCodeList){
        for(var i in dJobCodeList){
            for (var j = 0; j < dJobCodeList[j].DJOBCODE; j++) {
                $("#d_product_"+i).append("<li></li>");// 添加到UL中去
            }
        }
    }

	//异常情况表
    function exceptionTable(detailList){
        if(detailList){
            var trHtml = [];
            for(var i in detailList) {
                trHtml.push("<tr>");
                trHtml.push("<td align='center' class='addTr_exp_title'>" + detailList[i].FZJCODE + "</td>");
                trHtml.push("<td align='center' class='addTr_exp_title'>" + nvl(detailList[i].YCNAME,'') + "</td>");
                trHtml.push("<td align='center' class='addTr_exp_title'>" + detailList[i].INTIME + "</td>");
                trHtml.push("<td align='center' class='addTr_exp_title' id='last2'>" + detailList[i].STATUS + "</td>");
                trHtml.push("</tr>");
            }
            trHtml = trHtml.join("");

            $("#addTr").after(trHtml);
        }
    }
    //一次通过%转换成数值
    function parseYctg(str){
        if(str && str.length > 0 && str.indexOf("%")>-1){
            return str.replace("%","")*1;
        }
        return 0;
    }
    function dateToChar(day) {
        var date = new Date();
        date.setDate(date.getDate() - day);
        var month = date.getMonth()+1;
        month = month < 10 ? '0' + month : month;
        return date.getFullYear() + "-" + month + "-" + (date.getDate() < 10 ? "0" : "") + date.getDate();
    }
    //飞织机纱线库存柱状图数据
    function productKCTable(detailList){
        var myChart = echarts.init(document.getElementById('fzjkcTable'));
        this.colsBroken = [{"NAME":'机台1',"VALUE1":'100',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台2',"VALUE1":'200',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台3',"VALUE1":'234',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台4',"VALUE1":'111',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台5',"VALUE1":'425',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台6',"VALUE1":'160',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台7',"VALUE1":'600',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台8',"VALUE1":'500',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台9',"VALUE1":'400',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'},
            {"NAME":'机台10',"VALUE1":'560',"VALUE2":'100',"VALUE3":'100',"VALUE4":'100',"VALUE5":'100',"VALUE6":'100',"VALUE7":'100'}
        ];
        fzjkcTable(myChart,this.colsBroken);
    }

//飞织机纱线库存柱状图
    var nameLine = [];
    var valueLine1 = [];
    var valueLine2 = [];
    var valueLine3 = [];
    var valueLine4 = [];
    var valueLine5 = [];
    var valueLine6 = [];
    var valueLine7 = [];
    let a = new Map();
    function fzjkcTable(id, data) {
        for(var i in data){
            nameLine.push(data[i].NAME);
            valueLine1.push(data[i].VALUE1);
            valueLine2.push(data[i].VALUE2);
            valueLine3.push(data[i].VALUE3);
            valueLine4.push(data[i].VALUE4);
            valueLine5.push(data[i].VALUE5);
            valueLine6.push(data[i].VALUE6);
            valueLine7.push(data[i].VALUE7);
        }
        option = {
            xAxis: {
                type: 'category',
                data: nameLine
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            series : [
                {
                    name:nameLine[0],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine1
                },
                {
                    name:nameLine[1],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine2
                },
                {
                    name:nameLine[2],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine3
                },
                {
                    name:nameLine[3],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine4
                },
                {
                    name:nameLine[4],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine5,
                },
                {
                    name:nameLine[5],
                    type:'bar',
                    stack: '飞织机',
                    data:valueLine6
                },
                {
                    name:nameLine[6],
                    type:'bar',
                    stack: '飞织机',
                    data:7
                }
            ]
        };
        id.setOption(option);
    }

    /*    //每5分钟刷新一次
        setInterval(function(){
            //window.location.reload();
            vm.getData(vm);
        },30000);*/

</script>
</html>